<template>
<!--  <div style="margin-bottom: 20px">
    <el-button size="small" @click="addTab(editableTabsValue)">
      add tab
    </el-button>
  </div>-->
  <el-tabs v-model="editableTabsValue" type="card" class="demo-tabs" closable @tab-remove="removeTab">
    <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
<!--      {{ item.content }}-->
    </el-tab-pane>
  </el-tabs>
</template>
<script>
  import { ref ,onMounted,watch } from 'vue'
  import {useRoute,useRouter} from 'vue-router'
  import { ElMessage } from 'element-plus'
  export default {
    name:'Tag',
    setup(){
      const route=useRoute()
      const router=useRouter()
      const editableTabsValue = ref(route.name)
      const editableTabs = ref([])

      /* 监视路由，在tags栏增加相应tag */
      watch(()=>route.meta,(newValue)=>{
        editableTabsValue.value=route.name
        /* 判断是否已经存在*/
        const isExist=editableTabs.value.some(item => {
          return item.path === route.path;
        })
        /* 不存在则追加*/
        if(!isExist){
          editableTabs.value.push({title:newValue.title,name:route.name,path:route.path})
        }
      },{immediate:true,deep:true})

      /* 监视tag激活属性，实现点击tag后路由到对应组件 */
      watch(editableTabsValue,(newValue)=>{
        router.push({name:newValue})
      })

      /* 挂载执行 */
      onMounted(()=>{
      })

      /* 移除tag事件 */
      const removeTab = (targetName) => {
        const tabs = editableTabs.value
        const lastTabName=ref('')
        const isLastTab=ref(false)
        let activeName = editableTabsValue.value
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              const nextTab = tabs[index + 1] || tabs[index - 1]
              if (nextTab) {
                activeName = nextTab.name
              }else{
                isLastTab.value=true
                lastTabName.value=tab.name
              }
            }
          })
        }
        //判断是否为最后一页且最后一页是否为首页
        if(lastTabName.value === 'adminHome' && isLastTab.value===true){
          ElMessage({message:'最后一页为首页，删除失败！'})
        }
        //判断是否为最后一页，是则删除该页且展示首页
        else if (isLastTab.value===true){
          editableTabs.value.push({title:'首页',name:'adminHome',path:'/adminHome'})
          router.push({name:'adminHome'})
          editableTabsValue.value = activeName
          editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
        }else{
          editableTabsValue.value = activeName
          editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
        }

      }

      return{
        editableTabsValue,
        editableTabs,
        removeTab,
      }
    }
  }
</script>
<style scoped>
  .demo-tabs .el-tabs__content {
    padding: 32px;
    background-color: #f4f5f7;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
  .el-tabs__content{
    display: none;
  }
  .is-active{
    /*background-color: #324057;*/
  }
</style>





<!--
<template>
  <el-tag v-for="item in items" :key="item.label" class="tags" @close="handleClose(item)" :type="item.type" effect="dark" closable>
    {{ item.label }}
  </el-tag>
</template>

<script>
  import { ref } from 'vue'
  export default {
    name: "Tag",
    setup(){
      const items = ref([
        { type: '', label: 'Tag 1' },
        { type: 'success', label: 'Tag 2' },
        { type: 'info', label: 'Tag 3' },
        { type: 'danger', label: 'Tag 4' },
        { type: 'warning', label: 'Tag 5' },
      ])

      function handleClose(value){
        items.value.splice(items.value.indexOf(value),1)
      }

      return{
        items,
        handleClose
      }
    }
  }
</script>

<style scoped>
  .tags{
    height: 30px;
    overflow: hidden;
  }
</style>-->
